<template>
  <div overflow-hidden>
    <div h-75px bd-fff pt-30px pl-20px pr-20px mb-10px flex justify-between items-center>
      <div>
        <el-button
          plain
          text-15px
          type="primary"
          style="
            font-size: 15px;
            color: #fff;
            background: linear-gradient(
              90deg,
              rgba(0, 108, 222, 1) 0%,
              rgba(41, 182, 244, 1) 100%,
              rgba(0, 163, 235, 1) 99%
            );
            border: none;
          "
          @click="toCreate"
        >
          添加主体
        </el-button>
      </div>
      <div flex items-center>
        <div mr--10px>
          <el-input v-model="input3" placeholder="请输入内容">
            <template #prepend>
              <el-select v-model="select" placeholder="请选择" style="width: 115px">
                <el-option label="Restaurant" value="1" />
                <el-option label="Order No." value="2" />
                <el-option label="Tel" value="3" />
              </el-select>
            </template>
          </el-input>
        </div>
        <el-button type="primary" text-15px z-2 :icon="Search">搜索</el-button>
        <el-button
          plain
          text-15px
          :icon="RefreshRight"
          style="color: rgba(0, 108, 222, 1); border: 1px solid rgba(0, 108, 222, 1)"
        >
          清空
        </el-button>
        <el-dropdown ml-10px trigger="click">
          <el-button
            plain
            text-15px
            :icon="Grid"
            style="color: rgba(0, 108, 222, 1); border: 1px solid rgba(0, 108, 222, 1)"
          >
            更多
          </el-button>
          <template #dropdown>
            <el-dropdown-menu style="color: #2778ff">
              <el-dropdown-item :icon="DocumentCopy" @click="dropdownItemClick('copy')">
                复制
              </el-dropdown-item>
              <el-dropdown-item :icon="Printer" @click="dropdownItemClick('printer')">
                打印
              </el-dropdown-item>
              <el-dropdown-item :icon="Expand" @click="dropdownItemClick('export')">
                导出
              </el-dropdown-item>
              <el-dropdown-item :icon="Checked" @click="dropdownItemClick('archive')">
                归档
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <PlusTable
      key="3"
      :is-selection="true"
      adaptive
      has-index-column
      :title-bar="false"
      :header-cell-style="{
        backgroundColor: '#F1F3F7',
        color: '#000',
      }"
      :index-table-column-props="{
        label: '序号',
        width: 80,
      }"
      :columns="tableConfig"
      :table-data="tableData"
      :stripe="true"
      :border="false"
      :action-bar="{
        buttons: buttons2,
        type: 'link',
        confirmType: 'popconfirm',
        width: 200,
      }"
      :pagination="{
        total,
        modelValue: pageInfo,
        pageSizeList: [10, 20, 50],
        align: 'right',
        background: true,
      }"
      @paginationChange="handlePaginationChange"
      @selection-change="handleSelectionChange"
      @clickAction="handleClickButton"
    ></PlusTable>

    <PlusDialog v-model="show" class="small-dialog" title="确认信息" @confirm="handleConfirm">
      确认删除此行数据吗？
      <template #footer>
        <div pt-44px pb-43px style="margin: 0 auto">
          <el-button
            plain
            text-14px
            w-98px
            type="primary"
            style="
              font-size: 15px;
              color: #fff;
              background: linear-gradient(
                90deg,
                rgba(0, 108, 222, 1) 0%,
                rgba(41, 182, 244, 1) 100%,
                rgba(0, 163, 235, 1) 99%
              );
              border: none;
            "
          >
            提交
          </el-button>
          <el-button w-98px style="margin-left: 55px !important" plain @click="handleCancel">
            取消
          </el-button>
        </div>
      </template>
    </PlusDialog>
  </div>
</template>

<script lang="ts" setup>
import { useTable } from "plus-pro-components";
import type { PlusColumn, ButtonsCallBackParams, PageInfo } from "plus-pro-components";
import {
  View,
  Search,
  RefreshRight,
  Grid,
  DocumentCopy,
  Printer,
  Expand,
  Checked,
} from "@element-plus/icons-vue";

interface TableRow {
  id: number;
  name: string;
  status: string;
  tag: string;
  time: Date;
}

const router = useRouter();

const input3 = ref("");
const select = ref("");

const multipleSelection = ref<TableRow[]>([]);

const TestServe = {
  getList: async () => {
    const data = Array.from({ length: 10 }).map((item, index) => {
      return {
        id: index,
        name: index + "深邦智能科技集团（青岛）有限公司",
        person: "王" + index + "五",
        code: "9137021407735531XG" + index,
        money: 1000 + index + "万元",
        time: new Date(),
        address: `山东省青岛市城阳区青岛天谷产业园${index}号楼`,
        type: "有限公司",
        status: String(index % 3),
        tag: index === 1 ? "success" : index === 2 ? "warning" : index === 3 ? "info" : "danger",
      };
    });
    return {
      data: data as TableRow[],
    };
  },
};

const { buttons: buttons2, tableData, total, pageInfo } = useTable<TableRow[]>();

buttons2.value = [
  {
    // 打开
    text: "编辑",
    code: "edit",
    props: {
      type: "primary",
    },
    // confirm: {
    //   // @ts-ignore
    //   popconfirmProps: { width: 150, icon: WarnTriangleFilled, iconColor: "red" },
    //   message: (data) => `确定打开id为${data.row.id}的数据吗？`,
    // },
  },
  {
    // 查看
    text: "详情",
    code: "view",
    icon: View,
    props: {
      type: "primary",
    },
    show: (row: any) => row.status === "1",
  },
  {
    // 删除
    text: "删除",
    code: "delete",
    // props v0.1.16 版本新增计算属性支持
    props: computed(() => ({ type: "primary" })),
  },
];

const tableConfig: PlusColumn[] = [
  {
    label: "公司名称",
    prop: "name",
    width: 200,
  },
  {
    label: "法定代表人",
    width: 200,
    prop: "person",
  },
  {
    label: "统一信用代码",
    width: 200,
    prop: "code",
  },
  {
    label: "注册资金",
    width: 200,
    prop: "money",
  },
  {
    label: "时间",
    width: 200,
    prop: "time",
    valueType: "date-picker",
  },
  {
    label: "公司地址",
    width: 200,
    prop: "address",
  },
  {
    label: "企业类型",
    width: 200,
    prop: "type",
  },
  {
    label: "企业类型",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "自然责任公司",
        value: "0",
        color: "red",
      },
      {
        label: "有限责任公司",
        value: "1",
        color: "blue",
      },
      {
        label: "股份有限公司",
        value: "2",
        color: "yellow",
      },
      {
        label: "其他",
        value: "3",
        color: "red",
      },
    ],
  },
];

const getList = async () => {
  try {
    const { data } = await TestServe.getList();
    tableData.value = data || [];
  } catch (error) {
    console.error("获取数据失败", error);
  }
};
getList();

const handleClickButton = (data: ButtonsCallBackParams) => {
  console.log(data);
  if (data.buttonRow.code === "edit") {
    router.push({
      name: "LegalSubjectCreate",
      query: {
        id: data.row.id,
      },
    });
  } else if (data.buttonRow.code === "view") {
    return;
  } else if (data.buttonRow.code === "delete") {
    console.log("删除", data);
    show.value = true;
  }
};
const handleSelectionChange = (val: TableRow[]) => {
  multipleSelection.value = val;
};
const handlePaginationChange = (_pageInfo: PageInfo): void => {
  pageInfo.value = _pageInfo;

  getList();
};

const toCreate = () => {
  router.push({
    name: "LegalSubjectCreate",
  });
};

const dropdownItemClick = (type: string) => {
  console.log(type);
  if (type === "copy") {
    console.log("复制");
    show.value = true;
  } else if (type === "printer") {
    console.log("打印");
  } else if (type === "export") {
    console.log("导出");
  } else if (type === "archive") {
    console.log("归档");
  }
};

// 确认弹窗
const show = ref(false);

const handleConfirm = () => {
  ElMessage.success("删除成功");
  show.value = false;
};
const handleCancel = () => {
  show.value = false;
};
</script>
